<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>行和块的转换</title>
		<style type="text/css">
			#d1 div{
				border: 4px groove red;
				height: 100px;
				width: 100px;
				margin: 4px;
				/*行*/
				display: inline;
				/*padding: 20px;*/
			}
			#p1 a{
				height: 200px;
				width: 100px;
				border:1px solid red;
				text-decoration: none;
				display: block;/*块*/
			}
			#d2 div{
				background-color: blue;
				width: 100px;
				height: 100px;
				display: inline-block;
			}
		</style>
	</head>
	<body>
		<div id="d1">
			<div>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
		</div>
		
		<div id="d2">
			<div>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
		</div>
		<p id="p1">
			<a href="#">链接1</a>
			<a href="#">链接2</a>
			<a href="#">链接3</a>
			<a href="#">链接4</a>
			<a href="#">链接5</a>
		</p>
	</body>
</html>
